<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2021-11-01 08:53:36
 * @LastEditors: voanit
 * @LastEditTime: 2021-11-02 09:25:03
-->
<template>
  <div>
    御剑乘风来,除魔天地间!
    {{ $store.state.classObj.class }}
    <img :src="$store.state.user.userInfo.logo" alt="" />
    <input type="button" value="使用mutations更改logo" @click="btnHandle" />

    <hr />
    <Headers></Headers>

    <!-- 展示图书列表 -->
    <ul>
      <li v-for="item in $store.state.getBooks.books" :key="item.img">
        <img :src="item.img" alt="" />
        <p>name:{{ item.name }}</p>
        <p>price:{{ item.price }}</p>
      </li>
    </ul>

    <hr />
    <hr />
    computed:{{ total }}==={{ $store.getters['book/sum1'] }}
    <hr />
    <hr />

    <h1>mapState辅助函数的使用</h1>
    {{ $store.state.name }}==={{ name }} <br />
    {{ $store.state.age }}==={{ newAge }}

    <h1>模块中使用</h1>
    {{ $store.state.classObj.class2 }}==={{ class2 }}==={{ class3 }}<br />>
    <h1>mapGetters=====getters</h1>
    {{ $store.getters.gAge }}=={{ gAge }}<br />
    {{ $store.getters['book/sum1'] }}===={{ sum1 }}
    <h1>mapMutations</h1>
    <input type="button" value="mapMutations更改age" @click="addAge" />
    <input
      type="button"
      value="mapMutations更改logo--模块"
      @click="logoHandle"
    />
    <h1>mapActions</h1>
    <input type="button" value="actions按钮" @click="actionsHandle" />
    <input type="button" value="actions按钮==模块" @click="actionsHandleM" />
  </div>
</template>
           
<script>
import Headers from './components/Headers.vue'
import axios from 'axios'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: '',
  components: {
    Headers
  },
  data () {
    return {}
  },
  async created () {
    console.log(this, 88)
    console.log(this.$store.state.class)

    /* 留一个小作业： 如何使用Promise发送多个请求?   在第六个如何终止 */

    // axios(
    //   'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books'
    // ).then((res) => {
    //   console.log(res, 789)
    // })

    // const res = await axios(
    //   'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books'
    // )
    // this.$store.commit('setBooks', res.data.data)
    // console.log(res, 789)

    /* 调用actions中的函数 */
    // this.$store.dispatch('AgetBooks')
    this.$store.dispatch('getBooks/AgetBooks')
  },
  computed: {
    ...mapState(['name']),
    ...mapState({ newAge: 'age' }),
    ...mapState('classObj', ['class2']),
    ...mapState('classObj', { class3: 'class' }),
    ...mapGetters(['gAge']),
    ...mapGetters('book', ['sum1']),
    total () {
      console.log(111)
      return 123
    }
  },
  methods: {
    logoHandle () {
      // this.$store.commit('user/setLogo', {
      //   newLogo: 'https://www.runoob.com/wp-content/uploads/2016/02/react.png',
      //   second: '第二个参数',
      // })
      this.setLogo({
        newLogo: 'https://www.runoob.com/wp-content/uploads/2016/02/react.png',
        second: '第二个参数'
      })
    },
    ...mapMutations(['setName']),
    ...mapMutations('user', ['setLogo']),
    addAge () {
      // this.$store.commit('setName')
      this.setName()
    },

    btnHandle () {
      /* 只要是触发mutations中的函数必须使用commit */
      // this.$store.commit(
      //   'setLogo',
      //   'https://www.runoob.com/wp-content/uploads/2016/02/react.png',
      // )
      this.$store.commit('user/setLogo', {
        newLogo: 'https://www.runoob.com/wp-content/uploads/2016/02/react.png',
        second: '第二个参数'
      })
      // this.$store.state.userInfo.logo =
      //   'https://www.runoob.com/wp-content/uploads/2016/02/react.png'
    },
    /* actions */
    actionsHandle () {
      /* 触发全局中的aSet */
      // this.$store.dispatch('aSet', 2)
      this.aSet(3)
    },
    ...mapActions(['aSet']),
    ...mapActions('classObj', ['MaSet']),
    actionsHandleM () {
      // this.$store.dispatch('classObj/MaSet',5)
      this.MaSet(10)
    }
  }
}
</script>
<style lang='less'  scoped>
img {
  width: 100px;
  height: 100px;
}
</style>